<script setup>
import { ref } from "vue";
import mockGanttList from "../mock/ganttList.js";
import unArrangeTableData from "../mock/unArrangeTableData.js";
import dayjs from "dayjs";

const startDate = ref(
  dayjs()
    .subtract(2, "day")
    .format("YYYY-MM-DD") + " 00:00:00"
);
const endDate = ref(
  dayjs()
    .add(3, "month")
    .format("YYYY-MM-DD") + " 00:00:00"
);

const config = ref({
  type: "month", // year | month | date
  scaleWidth: 150, // px 下刻度每刻度长度
  divideBy: 2, // 上刻度
  rowHeight: 30, // 每条泳道高度
  viewHeight: 300, // 甘特图初始高度
  viewMaxHeight: 400, // 甘特图最大高度
  showCurrentTimeScaler: true, // 是否显示当前时间轴
  showRowsRange: true, // 是否显示当前可视区域显示行数范围
  showGoToTop: true, // 是否显示滚回视图顶部按钮
});

const list = ref(mockGanttList(20).list);

const ganttTableConfig = ref({
  tableColumn: [
    {
      label: "项目",
      prop: "project",
    },
    {
      label: "生产线",
      prop: "prodLine",
    },
    {
      label: "区域",
      prop: "zone",
      "show-overflow-tooltip": true,
    },
  ],
});

const unArrangeConfig = ref({
  list: unArrangeTableData,
  tableColumn: [
    {
      label: "流水号",
      prop: "pkid",
    },
    {
      label: "工作任务",
      prop: "content",
    },
  ],
  // 待排区列表行按钮配置
  rowOperations: [
    {
      name: "查看",
      type: "success",
      click: (scope) => {
        console.log(scope);
      },
    },
  ],
  // 待排区列表操作列配置
  operationsConfig: {
    width: 100,
  },
});
</script>

<template>
  <ryGanttChart
    ref="ryGanttChart"
    :config="config"
    :list="list"
    :startDate="startDate"
    :endDate="endDate"
    :ganttTableConfig="ganttTableConfig"
    :unArrangeConfig="unArrangeConfig"
  >
    <template v-slot:taskContent="slotProps">
      <div class="text" @click="handleClickTask(slotProps.task)">
        {{ `${slotProps.task.content} (id:${slotProps.task.pkid})` }}
      </div>
    </template>
  </ryGanttChart>
</template>
